import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

import 'package:flutter/services.dart';

class Paper extends StatefulWidget {
  @override
  _PaperState createState() => _PaperState();
}

class _PaperState extends State<Paper> with SingleTickerProviderStateMixin {
  late ui.Image _image;

  @override
  void initState() {
    super.initState();
    // 资源图片需要提前加载
    loadImage().then((value) {
      setState(() {
        _image = value;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment.center,
      child: Directionality(
        textDirection: TextDirection.ltr,
        child: Stack(
          children: <Widget>[
            // 边框文字
            Text(
              'BillionBottle',
              style: TextStyle(
                fontSize: 120,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
                foreground: Paint()
                  ..style = PaintingStyle.stroke
                  ..strokeWidth = 14
                  ..color = Colors.black
                  // 使用图片着色器将资源图片绘制到边框文字的前景色上
                  ..shader = ImageShader(
                      _image,
                      TileMode.repeated,
                      TileMode.repeated,
                      Float64List.fromList([
                        1,
                        0,
                        0,
                        0,
                        0,
                        1,
                        0,
                        0,
                        0,
                        0,
                        1,
                        0,
                        0,
                        0,
                        0,
                        1,
                      ])),
              ),
            ),
            // 填充文字，两层绘制叠加，完成描边效果
            Text(
              'BillionBottle',
              style: TextStyle(
                fontSize: 120,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
                color: Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 读取 assets 中的图片
Future<ui.Image> loadImage() async {
  ByteData byteData = await rootBundle.load('assets/images/test.jpg');
  ui.Codec codec =
      await ui.instantiateImageCodec(byteData.buffer.asUint8List());
  ui.FrameInfo frameInfo = await codec.getNextFrame();
  return frameInfo.image;
}
